<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.*,hotel.entity.Role" %>
<section class="content-header">
	<h1>
		<i class="fa fa-user-circle-o"></i> 角色管理 <small></small>
	</h1>
	<ol class="breadcrumb">
		<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
		<li class="active">角色管理 </li>
	</ol>
</section>

<section class="content">
	<div class="box">
		<div class="box-header">
			<button id="btn-add"  type="button" class="layui-btn layui-btn-radius layui-btn-green">
				<i class="layui-icon">&#xe654;</i>创建角色
			</button>
			<button id="btn-edit"  type="button" class="layui-btn layui-btn-radius layui-btn-warm">
				<i class="layui-icon">&#xe642;</i>修改角色
			</button>
			<button id="btn-view"  type="button" class="layui-btn layui-btn-radius layui-btn-normal">
				<i class="layui-icon">&#xe63c;</i>查看详情
			</button>
<!-- 			<button id="btn-auth"  type="button" class="layui-btn layui-btn-radius layui-btn-disabled" disabled> -->
<!-- 				<i class="layui-icon">&#xe612;</i>用户赋权 -->
<!-- 			</button> -->
        </div>
        
		<div class="box-body">
			<table class="table table-bordered table-striped" id="rolelist">
				<thead>
            		<tr>
            			<th>ID</th> <th>角色名</th>  <th>说明</th> <th>创建时间</th>
            		</tr>
        		</thead>
        		<tbody>
        		</tbody>
			</table>
		</div>
     </div>
</section>

<script type="text/javascript">
$(document).ready(function() {
	
	//DataTable初始化
	var table =  $('#rolelist').DataTable( {
        "ajax": "rolelist",
        "language": {
			"url": "AdminLTE/components/datatables/i18n/Chinese.json"
		},
        "columns": [
            { "data": "roleid" },
            { "data": "roleName" },
            { "data": "comment" },
            { "data": "createdTime" }
        ],
        responsive: true,	//表格搜索功能
        select: true	//datatables select 插件,使每一行可选中
    } );
	
	$('#btn-add').click( function () {
		layer.open({  //layer弹出层
			  type: 2,
			  title:"创建角色",
			  area: ['900px', '600px'],
			  //content: ['addUser','no'],//无滚动条
			  content: 'addRole',
			  shade: [0.6, '#000'],//阴影透明度
			  anim:2,//弹出动画
			  isOutAnim: false,//关闭无动画
			  //skin: 'layui-layer-molv',//皮肤
			  end : function(index){
				  table.ajax.reload();
			  }
		});
    } ); 

	$('#btn-edit').click(function() {
		var rowData =table.rows( { selected: true } ).data().toArray();
   		 if(rowData.length==1){
   			var roleid = rowData[0].roleid;
   			layer.open({
    			  type: 2,
    			  title:"修改角色",
    			  area: ['900px', '600px'],
    			  content:'editRole?roleid='+roleid,
    			  shade: [0.6, '#000'],//阴影透明度
    			  anim:2,//弹出动画
    			  isOutAnim: false,//关闭无动画
    			  end : function(index){
    				  table.ajax.reload();
    			  } 
    		});
   		 }else{
   			 layer.msg('请选择一行!', {time: 800, icon:7});
   		 }
	 });
	
	$('#btn-view').click(function() {
		var rowData =table.rows( { selected: true } ).data().toArray();
  		 if(rowData.length==1){
  			var roleid = rowData[0].roleid;
  			layer.open({
   			  type: 2,
   			  title:"查看详情",
   			  area: ['800px', '530px'],
   			  content:'viewRole?roleid='+roleid,
   			  shade: [0.6, '#000'],//阴影透明度
   			  anim:2,//弹出动画
   			  isOutAnim: false,//关闭无动画
   			  end : function(index){
   				  table.ajax.reload();
   			  } 
   		});
  		 }else{
  			 layer.msg('请选择一行!', {time: 800, icon:7});
  		 }
	 });
	
// 	$('#btn-auth').click( function () {
// 		var rowData =table.rows( { selected: true } ).data().toArray();
//  		 if(rowData.length==1){
//  			var roleid = rowData[0].roleid;
//  			var roleName=rowData[0].roleName
//  			layer.open({
//   			  type: 2,
//   			  title:"用户-角色关联  当前角色: "+roleName,
//   			  area: ['800px', '530px'],
//   			  content:'authRole?roleid='+roleid,
//   			  shade: [0.6, '#000'],//阴影透明度
//   			  anim:2,//弹出动画
//   			  isOutAnim: false,//关闭无动画
//   		});
//  		 }else{
//  			 layer.msg('请选择角色后再进行操作!', {time: 1200, icon:7});
//  		 }
// 	} );
});
</script>